<template>
  <div class="login-container">
    <div class="login-box div_1pb7a6gwc6">
      <div class="login-header">
        <h1 class="login-title h1_1pd7a6gwc6">欢迎</h1>
      </div>
      <div class="login-form">
        <ElForm :model="state.form" label-position="top">
          <ElFormItem label="用户名">
            <ElInput
              v-model="state.form.username"
              placeholder="请输入用户名"
              :prefix-icon="VtjIconUser"></ElInput
          ></ElFormItem>
          <ElFormItem label="密码">
            <ElInput
              v-model="state.form.password"
              type="password"
              placeholder="请输入密码"
              :prefix-icon="VtjIconLock"
              show-password=""></ElInput
          ></ElFormItem>
          <div class="login-options">
            <ElCheckbox v-model="state.form.remember"> 记住我</ElCheckbox>
            <ElLink type="primary" :underline="false"> 忘记密码?</ElLink>
          </div>
          <ElButton
            type="primary"
            class="login-btn"
            :loading="state.loading"
            @click="handleLogin">
            登录系统</ElButton
          ></ElForm
        >
      </div>
      <div class="login-footer">
        <div class="tech-lines">
          <div class="line"></div>
          <div class="line"></div>
          <div class="line"></div>
        </div>
      </div>
    </div>
    <div class="particles div_1pp7a6gwc8">
      <div v-for="(i, index) in 15" :key="i" class="particle"></div>
    </div>
  </div>
</template>
<script lang="ts">
  // @ts-nocheck
  import { defineComponent, reactive } from 'vue';
  import {
    ElForm,
    ElFormItem,
    ElInput,
    ElCheckbox,
    ElLink,
    ElButton
  } from 'element-plus';
  import { VtjIconUser, VtjIconLock } from '@vtj/icons';
  import { useProvider } from '@vtj/renderer';
  export default defineComponent({
    name: 'LaunchPage',
    components: { ElForm, ElFormItem, ElInput, ElCheckbox, ElLink, ElButton },
    setup(props) {
      const provider = useProvider({ id: '18zth44z', version: '1755241203992' });
      const state = reactive({
        form: { username: '', password: '', remember: false },
        loading: false
      });
      return { state, props, provider, VtjIconUser, VtjIconLock };
    },
    methods: {
      handleLogin() {
        this.state.loading = true;
        setTimeout(() => {
          this.state.loading = false;
          if (this.state.form.username && this.state.form.password) {
            this.$message.success('登录成功');
            this.$router.push('/dashboard');
          } else {
            this.$message.error('请输入用户名和密码');
          }
        }, 1500);
      }
    }
  })
</script>
<style lang="css" scoped>
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    overflow: hidden;
    position: relative;
    padding: 20px;
  }
  .login-box {
    width: 100%;
    max-width: 420px;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(94, 234, 212, 0.2);
    border-radius: 12px;
    padding: 40px 30px;
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(94, 234, 212, 0.1),
      0 0 20px rgba(56, 189, 248, 0.2);
    z-index: 2;
    position: relative;
  }
  .login-header {
    text-align: center;
    margin-bottom: 30px;
  }
  .login-title {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(90deg, #60a5fa, #38bdf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
    letter-spacing: 1px;
  }
  .login-subtitle {
    color: #94a3b8;
    font-size: 14px;
    letter-spacing: 2px;
  }
  .login-form .el-form-item {
    margin-bottom: 24px;
  }
  .login-form .el-form-item__label {
    color: #cbd5e1;
    font-weight: 500;
    padding-bottom: 6px;
  }
  .login-form :deep(.el-input__wrapper) {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(94, 234, 212, 0.2);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.1);
  }
  .login-form :deep(.el-input__wrapper):hover,
  .login-form :deep(.el-input__wrapper):focus {
    border-color: rgba(56, 189, 248, 0.5);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
  }
  .login-form :deep(.el-input__inner) {
    color: #e2e8f0;
  }
  .login-form :deep(.el-input__prefix) {
    color: #60a5fa;
  }
  .login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }
  .login-options .el-checkbox {
    color: #94a3b8;
  }
  .login-options .el-link {
    color: #60a5fa;
    font-size: 14px;
  }
  .login-btn {
    width: 100%;
    height: 44px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border: none;
    border-radius: 8px;
    transition: all 0.3s;
  }
  .login-btn:hover {
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
  }
  .login-footer {
    margin-top: 30px;
    text-align: center;
  }
  .login-footer .tech-lines {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
  }
  .login-footer .tech-lines .line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #38bdf8, transparent);
  }
  .login-footer .copyright {
    color: #64748b;
    font-size: 12px;
  }
  .particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .particles .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.15);
    animation: float 15s infinite linear;
  }
  .particles .particle:nth-child(1) {
    width: 6px;
    height: 6px;
    top: 10%;
    left: 20%;
    animation-delay: 0s;
  }
  .particles .particle:nth-child(2) {
    width: 8px;
    height: 8px;
    top: 25%;
    left: 80%;
    animation-delay: -2s;
  }
  .particles .particle:nth-child(3) {
    width: 4px;
    height: 4px;
    top: 60%;
    left: 10%;
    animation-delay: -5s;
  }
  .particles .particle:nth-child(4) {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 65%;
    animation-delay: -8s;
  }
  .particles .particle:nth-child(5) {
    width: 5px;
    height: 5px;
    top: 75%;
    left: 40%;
    animation-delay: -10s;
  }
  .particles .particle:nth-child(6) {
    width: 9px;
    height: 9px;
    top: 30%;
    left: 50%;
    animation-delay: -3s;
  }
  .particles .particle:nth-child(7) {
    width: 6px;
    height: 6px;
    top: 85%;
    left: 70%;
    animation-delay: -7s;
  }
  .particles .particle:nth-child(8) {
    width: 5px;
    height: 5px;
    top: 15%;
    left: 35%;
    animation-delay: -12s;
  }
  .particles .particle:nth-child(9) {
    width: 7px;
    height: 7px;
    top: 55%;
    left: 85%;
    animation-delay: -4s;
  }
  .particles .particle:nth-child(10) {
    width: 4px;
    height: 4px;
    top: 65%;
    left: 25%;
    animation-delay: -6s;
  }
  @keyframes float {
    0% {
      transform: translateY(0) translateX(0);
      opacity: 0.3;
    }
    25% {
      transform: translateY(-20px) translateX(15px);
      opacity: 0.6;
    }
    50% {
      transform: translateY(-10px) translateX(-20px);
      opacity: 0.8;
    }
    75% {
      transform: translateY(15px) translateX(-10px);
      opacity: 0.5;
    }
    100% {
      transform: translateY(0) translateX(0);
      opacity: 0.3;
    }
  }
  @media (max-width: 768px) {
    .login-box {
      padding: 30px 20px;
      max-width: 90%;
    }
    .login-title {
      font-size: 24px;
    }
  }

  .div_1pb7a6gwc6 {
    background-color: #ffffff;
    top: 0px;
  }

  .h1_1pd7a6gwc6 {
    top: 0px;
    padding-top: 0px;
    margin-top: 0px;
  }

  .div_1pp7a6gwc8 {
    background-image: url();
    background-size: cover;
  }
</style>
